<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
    <style type="text/css">
      html, body {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
      button {
        display: block;
        width: 100%;
        height: 30%;
        font-size: 50px;
      }
      pre {
        font-size: 20px;
      }
    </style>
</head>
<body>
<script type="text/javascript">

function callNative(data) {
  // 我们要求data一定是一个json对象，在这里转成string
  let stringData = JSON.stringify(data)

  // 利用判断，决定系统，调用不同的接口
  if (window.androidBridge) {
    window.androidBridge.callNative(stringData)
  } else {
    window.webkit.messageHandlers.iOSBridge.postMessage(stringData)
  }
}

function onClickButton() {
  callNative({
    name: 'mingo'
  })
}

// 声明onNativeResult给webView运行
function onNativeResult(result) {
    var logEl = document.getElementById('log')
    logEl.innerText += result + "\n"
}
</script>

<!-- 打算点击按钮调用native -->
<button onclick="onClickButton()">Call Native</button>

<pre id="log">
<!-- 用于显示js的日子 -->
</pre>
</body>
</html>